<template>
  <div class="home">
    <button @click="btnMinus">-</button>
    {{count}}
    <!-- <button @click="add(2)">+</button> -->
    <button @click="btnAdd">+</button>
  </div>
</template>

<script>
// ref是组合api的一个声明基本数据类型的数据的方法
// import { ref } from 'vue'
import { count, add,  minus} from '../setups/countControl'
export default {
  name: 'Home',
  setup() { // setup运行在声明周期的beforeCreate之前
  // 在setup中声明的数据或者函数必须return出去才能在页面中使用
  // vue3使用ref声明的数据时会自动填充value值
  // 也可以在组合api中直接声明函数
    function btnAdd() {
      add(3)
    }

    function btnMinus() {
      minus(2)
    }
    return {
      count,
      btnAdd,
      btnMinus
    }
  }
}
</script>
